<template>
	<view class="container">
		<view class="postx" :style="scrollTop>0?'background:#FFF;':''">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view class="flexJusp" style="font-size: 36rpx;font-weight: bold;text-align: center;padding:0 20rpx;"
				:style="'height:'+navigationBarHeight+'px;line-height:'+navigationBarHeight+'px'">
				<view></view>
				<view>我的钱包</view>
				<view></view>
			</view>
		</view>
		<view style="width: 750rpx;height: 650rpx;background: linear-gradient(228deg,#CCEAFF,#F9FBFC);">
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<view :style="'height:'+navigationBarHeight+'px'"></view>
			<view style="text-align: right;" @click="notify">
				<image style="width:29rpx;height:35rpx;margin:60rpx 56rpx 0 0 ;" src="/static/image/01_fv.png"></image>
			</view>
			<view style="text-align: center;font-size: 52rpx;font-weight: bold;">￥{{money}}</view>
			<view style="text-align: center;font-size: 30rpx;font-weight: bold;margin:16rpx 0 46rpx;">账户余额</view>
			<view class="flex">
				<view class="buttons" style="margin-left: 21px;" @click="withdrawal">余额提现</view>


				<!-- 实名认证弹窗 -->
				<uni-popup ref="inputDialog" type="center" background-color="#fff">
					<view :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<view class="popup-content_2">
							<view @tap="Customer_close('center')" style="margin-left: 420rpx; margin-top: 30rpx;">
								<uni-icons type="closeempty" size="20"></uni-icons>
							</view>
							<view style="display: flex;justify-content: center;align-items: center; ">
								<view>
									<image style="width: 190rpx;height: 175rpx;border-radius:50%;"
										src="/static/certification.png"></image>
								</view>
							</view>
							<text class="dialog-text" style="font-weight: bold;padding-bottom: 0px;">实名认证</text>
							<text class="dialog-text-center">提现前请完成实名认证</text>
							<view class="buttons" style="margin-left: 43px;" @click="shiming">立即实名</view>
						</view>
					</view>
					<!-- 	<view style="display: flex;justify-content: center;align-items: center; margin-top: 35rpx;">
											<view>
												<image style="width: 90rpx;height: 90rpx;border-radius:50%;"
													src="/static/屏幕截图 2024-07-11 142424.png"></image>
											</view>
										</view> -->
				</uni-popup>

				<view class="buttonx" @click="recharge">钱包充值</view>
			</view>
			<view
				style="width: 710rpx;height: 408rpx;background: #FBFAFC;box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.06);border-radius: 28rpx;margin:44rpx auto 0;line-height:72rpx;">
				<view class="flexJusp" @click="walletDetail"
					style="padding:32rpx 24rpx;border-bottom:2rpx solid #F4F3F5;">
					<view class="flex">
						<image style="width:72rpx;height:72rpx;" src="/static/image/04_mx.png"></image>
						<view style="margin-left:16rpx;">明细</view>
					</view>
					<image style="width:12rpx;height:24rpx;margin:24rpx 0 0;" src="/static/image/03_1ikj.png"></image>
				</view>
				<view class="flexJusp" @click="recharge" style="padding:32rpx 24rpx;border-bottom:2rpx solid #F4F3F5;">
					<view class="flex">
						<image style="width:72rpx;height:72rpx;" src="/static/image/04_dfd.png"></image>
						<view style="margin-left:16rpx;">充值</view>
					</view>
					<image style="width:12rpx;height:24rpx;margin:24rpx 0 0;" src="/static/image/03_1ikj.png"></image>
				</view>
				<view class="flexJusp" @click="coupon" style="padding:32rpx 24rpx;">
					<view class="flex">
						<image style="width:72rpx;height:72rpx;" src="/static/image/04_jyu.png"></image>
						<view style="margin-left:16rpx;">我的优惠券</view>
					</view>
					<image style="width:12rpx;height:24rpx;margin:24rpx 0 0;" src="/static/image/03_1ikj.png"></image>
				</view>
			</view>
		</view>
		<view style="height:env(safe-area-inset-bottom);"></view>
		<view class="tabbar">
			<view class="flexJusp">
				<view @click="index">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_sy.png"></image>
					<view>首页</view>
				</view>
				<view @click="order">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_dd.png"></image>
					<view>订单</view>
				</view>
				<view @click="placeorder" style="width:130rpx;"></view>
				<view @click="wallet" style="color: #1176EF;">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_wb_fill.png"></image>
					<view>钱包</view>
				</view>
				<view @click="user">
					<image style="width:44rpx;height:44rpx;" src="/static/image/icon_wd.png"></image>
					<view>我的</view>
				</view>
				<image @click="placeorder" style="width:130rpx;height:130rpx;position: absolute;left:312rpx;top:-44rpx;"
					:src="this.$loadImage('homeOrderTip')"></image>
				<view @click="placeorder"
					style="font-size: 22rpx;color: #FFFFFF;position: absolute;left:332rpx;top:26rpx;">立即下单</view>
			</view>
			<view style="height:env(safe-area-inset-bottom);"></view>
		</view>
	</view>
</template>

<script>
	import {
		systemInfo
	} from '@/https/mixin.js'
	export default {
		mixins: [systemInfo],
		data() {
			return {
				scrollTop: 0,
				money: 0
			}
		},
		onLoad() {
			this.getSystemInfo()
			uni.hideTabBar()
		},
		onShow() {
			this.loads()
		},
		onPageScroll(event) {
			const scrollTop = event.scrollTop // 获取当前页面滚动高度
			this.scrollTop = event.scrollTop
		},
		methods: {
			/* 实名认证弹窗 */
			// 打开输入对话框
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			// 当用户在输入对话框点击确认时触发
			dialogInputConfirm(val) {
				uni.showLoading({
					title: '3秒后会关闭'
				})

				setTimeout(() => {
					uni.hideLoading()
					console.log(val)
					this.value = val // 将用户输入的值赋给data中的value
					this.$refs.inputDialog.close() // 关闭对话框
				}, 3000)
			},
			notify() {
				uni.navigateTo({
					url: '/pages/index/Notify/Notify'
				})
			},

			/* 	// 检查实名认证状态
			checkAuthentication() {
				const that = this; // 保存当前Vue实例的引用
				this.$httpapi('checkAuthentication', 'POST', {}).then(res => {
					if (res.data.isAuthenticated) {
						// 用户已经实名认证，可以进行提现操作
						that.withdrawalOperation();
					} else {
						// 用户未实名认证，需要先进行实名认证
						that.inputDialogToggle();
					}
				}).catch(error => {
					console.error('检查实名认证状态失败:', error);
					// 这里可以处理错误，例如显示错误信息给用户
				});
			},
 */
			// 关闭
			Customer_close() {
				console.log('00');
				this.$refs.inputDialog.close()

			},
			// 余额提现操作
			withdrawalOperation() {
				uni.navigateTo({
					url: '/pages/wallet/Withdrawal/Withdrawal'
				});
			},
			shiming() {
				uni.navigateTo({
					url: '/pages/wallet/Withdrawal/certification/certification' // 指定要跳转的页面路径
				});
				 this.Customer_close();
			},
			walletDetail() {
				uni.navigateTo({
					url: '/pages/wallet/walletDetail/walletDetail'
				})
			},
			coupon() {
				uni.navigateTo({
					url: '/pages/index/coupon/coupon'
				})
			},
			loads() {
				this.$httpapi('selectuserinfo', 'POST', {}).then(res => {
					this.money = res.data.money
				})
			},
			withdrawal() {
				const that = this; // 保存当前Vue实例的引用
				// 调用后端实名认证检查接口
				this.$httpapi('checkAuthentication', 'POST', {}).then(res => {
					if (res.code === 200) {
						// 用户已经实名认证，跳转到提现页面
						if (res.data) {
							that.withdrawalOperation();
						} else {
							// 用户未实名认证，显示实名认证弹窗
							that.inputDialogToggle();
						}
					} else {
						// 处理错误情况，例如显示错误信息给用户
						uni.showToast({
							title: res.data.message || '检查实名认证状态失败',
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(error => {
					console.error('检查实名认证状态失败:', error);
					uni.showToast({
						title: '系统错误，请稍后重试',
						icon: 'none',
						duration: 2000
					});
				});
			},
		/* 	uni.navigateTo({
				url: '/pages/wallet/Withdrawal/Withdrawal'
			}) */
			recharge() {
				uni.navigateTo({
					url: '/pages/wallet/Recharge/Recharge'
				})
			},
			index() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			order() {
				uni.switchTab({
					url: '/pages/myOrder/myOrder'
				})
			},
			placeorder() {
				uni.switchTab({
					url: '/pages/PlaceOrder/PlaceOrder'
				})
			},
			wallet() {
				uni.switchTab({
					url: '/pages/wallet/wallet'
				})
			},
			user() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F6FA;
	}

	.container {
		padding-bottom: 150rpx;

		.postx {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999999;
		}

		.buttons {
			text-align: center;
			width: 302rpx;
			height: 76rpx;
			background: linear-gradient(180deg, #11C4EF 0%, #318FFF 100%);
			border-radius: 38rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 76rpx;
			margin: 0 26rpx 0 60rpx;
		}

		.buttonx {
			text-align: center;
			width: 298rpx;
			height: 72rpx;
			border-radius: 38rpx;
			border: 2rpx solid #1176EF;
			font-size: 26rpx;
			color: #1176EF;
			line-height: 72rpx;
		}

		.uni-popup__wrapper {
			display: block;
			position: relative;
			border-radius: 20rpx;
		}

		.uni-dialog-title {
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding-top: 130px;
		}

		.uni-popup__error {
			color: #000;
			font-weight: bold;
		}

		.dialog-text-center {
			text-align: center;
			/* 文本居中对齐 */
			padding: 20px;
			/* 根据需要添加内边距 */
			font-size: 16px;
			/* 根据需要调整字体大小 */
			color: #333;
			/* 文本颜色 */
			display: flex;
			justify-content: center;

		}

		.dialog-text {
			font-size: 18px;
			/* 文本的字体大小 */
			color: #333;
			/* 文本的颜色 */
			padding: 20px;
			text-align: center;
			display: flex;
			justify-content: center;
		}

		.popup-content_2 {
			width: 500rpx;
			height: 550rpx;
			border-radius: 10rpx;
			border-radius: 20rpx 40rpx 10rpx 30rpx;
			/* 左上, 右上, 左下, 右下 */


			.button_Save {
				text-align: center;
				margin-top: 50rpx;
				font-size: 25rpx;
			}
		}

		/* 立即实名按钮 */
		.buttons {
			text-align: center;
			width: 344rpx;
			height: 86rpx;
			background: linear-gradient(180deg, #2089FF 0%, #11ACEF 100%);
			border-radius: 44rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 86rpx;
		}

		element.style {
			padding-top: 0px;
			padding-bottom: 0px;
		}

		.tabbar {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9999;
			width: 650rpx;
			background-color: #FFF;
			color: #9EA3AE;
			font-size: 24rpx;
			padding: 6rpx 50rpx;
			line-height: 36rpx;
			box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.10);
			text-align: center;
		}
	}
</style>
